<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
      <!-- 导航栏 -->
      <nav>
        <ul>
          <li>主页</li>
          <li>排行榜</li>
          <li>联系方式</li>
        </ul>
      </nav>
      <!-- 头部内容 -->
      <div class="box">
            <header>
        <!-- 导航栏的按钮 -->
        <button id="toggle">导航栏</button>
        <!-- 标题 -->
        <h2>欢迎来到富豪排行榜</h2>
        <!-- 欢迎语句 -->
        <p>weclome to the rich rank</p>
        <!-- 登陆按钮 -->
        <!-- <button id="login">登陆</button> -->
      </header>
      <!-- 主题内容 -->
      <div class="container">
        <!-- 左盒子 -->
            <aside>
                <!-- 五个按钮 -->
                <button id="add-user">添加账户</button>
                <button id="double">资金翻倍</button>
                <button id="show-millionaire">查询百万富翁</button>
                <button id="sort">财富榜</button>
                <button id="calculate">计算总额</button>
            </aside>
        <!-- 右盒子 -->
            <main id="main">
                  <h2>
                    <strong>Person</strong>  
                    <span>Wealth</span>
                  </h2>

            </main>
      </div>
      </div>
  
      <script>
        let data = [
        { name: "English chan", money: 392001 },
        { name: "alex chan", money: 568932 },
        { name: "melon chan", money: 698756 },
        { name: "Clare Langner", money: 292489 },
        { name: "Abigail Rice", money: 953957 },
        { name: "Clarice Dias", money: 168472 },
        { name: "Vernon Lucas", money: 718225 },
        { name: "Nina Schmidt", money: 889147 },
      ];

        //获取节点
        let adduser = document.querySelector("#add-user");
        let double = document.querySelector("#double");
        let show = document.querySelector("#show-millionaire");
        let sortlist = document.querySelector("#sort");
        let calculate = document.querySelector("#calculate");
        let main = document.querySelector("#main");

        let renderData = [];   //专门渲染数据的变量
        let num = -1;    //计数器，点击次数的变量

        //绑定监听事件
        //添加账户事件
        adduser.addEventListener('click', function (){
              // 1.点击第一个渲染第一条数组的数据在main的右盒子中
              // 2. 点击第二次，渲染第一条 + 第二条
              // 3. 以此内推
              
              num ++; 
              if(num >= data.length){
                  return;
              }
              renderData.push(data[num]);

              //调用更新渲染数据
              updateDom(renderData);
        
        })

        //资金翻倍事件
        double.addEventListener('click', function (){
            /* renderData.forEach(function(item){
              //金钱翻倍
              item.money *= 2;
            }) */
            
            //金钱翻倍的第二种方法
/*             renderData = renderData.map(function(item){
                return {
                name: item.name,
                money: item.money * 9999999999999999999999999999999999999
                }
            }) */

            //es6写法(第三种方法【办公最常用的】)
            renderData = renderData.map(function(item){
                return {
                ...item,
                money: item.money * 2
                }
            })

             //调用更新渲染数据
            updateDom(renderData);

        })
        
        // 查询百万富翁事件
        show.addEventListener('click', function (){
            //过滤百万富翁  filter
            renderData = renderData.filter(function(item){
                return item.money > 1000000
            })

             //调用更新渲染数据
             updateDom(renderData);
        })
        
        //查询百富榜
        sortlist.addEventListener('click', function (){
            renderData.sort(function(a,b){
                return b.money - a.money;
            })

            //调用更新渲染数据
            updateDom(renderData);
        })
        
        //计算总额
        calculate.addEventListener('click', function (){
            //算一个总数
            let total = 0;
            //第一种方式
            renderData.forEach(function(item){
              total += item.money
            })
            console.log(total); 

            //第二种方式累加器
/*             let total =  renderData.reduce(function(sum,item){
              return sum += item.money;
            },0)
            console.log(total) */

             //  清空上一次渲染
             main.innerHTML = `
                    <h2>
                    <strong>Person</strong>  
                    <span>Wealth</span>
                  </h2>`;


            //创建div
            let div = document.createElement('div');
            //把这个div挂在父元素上
            div.innerHTML = `
                  <strong>总金额：<strong>${formatMoney(total)}
            `;
            //把这个标签传上去
            main.appendChild(div);

            
            
        })

        //通过循环更新渲染到页面数据中
        function updateDom(providData){
                    //  清空上一次渲染
                    main.innerHTML = `<h2>
                    <strong>Person</strong>  
                    <span>Wealth</span>
                  </h2>`

              //通过循环渲染到页面中
              providData.forEach(function (item){
                  //1. 创建节点 div （孤儿节点）
                  let div = document.createElement("div");
                  //2. 新增一个属性person + 文本 （结构+数据）
                  div.classList.add("person");
               /*  */   div.innerHTML = `
                            <strong>${item.name}</strong>
                            <strong>${toThousand(item.money)}</strong>
                  `;
                  //3. div 挂父元素上
                  main.appendChild(div);
              }) 
        }
      
      //转换金钱的输出格式
      function formatMoney(money) {
        //对这个money做操作
/*         toLocaleString()  这个方法是官方自带的一个关于金钱转换的操作,
        自动把 num 的数据 123456 = 123.456 */
        return '$' + money.toLocaleString() + '.00'
      }



      function toThousand(money){
        let str = money;  //调用money
        let arr = []; //创建一个新的数组
        let count = 0;  //计数
        let strArr = money.toString().split('');  //把money转换为字符串，在进行split把字符串分割为字符串数组
      

        //  倒序排列循环
        for(let i = strArr.length - 1; i >= 0; i--){
          count++;  //计数每倒序一个i ++ 

          arr.unshift(strArr[i]); //在数组前面添加新的长度
          if(count % 3 === 0 && i!=0){  //判断计数取余3位数的时候等于0的时候加一个逗号，并且i不等于0下标的时候停止操作
              arr.unshift(','); //在数组前面添加新的逗号
          }
        }

        str = arr.join('');   // 将数组转换为字符串
        
        return str; // 返回数组
      }
      </script>
  </body>
</html>
